import React, { forwardRef,useState,useEffect } from 'react';
import { Input, Form,  Select } from 'antd'
const {Option} = Select
const Formitem = forwardRef((props, ref) => {
  const [regionState, setregionState] = useState(false)
  useEffect(() => {
    setregionState(props.isUpdataDisable)
  }, [props.isUpdataDisable])
  const disabledMeath = (num, item) => {
   const { roleId, region, username } = JSON.parse(localStorage.getItem('token'))
      if (props.isDisableState) { // 编辑
        if (roleId == 1) { // 超级管理员
          return false
        } else {
          return true
        }
      } else { // 新增
        if (roleId == 1) { // 超级管理员
          return false
        } else {
          if (num === 1) {
             return item.value!==region
          } else {
            return item.id !== 3
          }
        }
      }
  }
  return (
    <div>
      <Form
        ref={ref}
            layout="vertical"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input />
          </Form.Item>
           <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input />
          </Form.Item>
          <Form.Item
            label="区域"
            name="region"
            rules={regionState?[]:[{ required: true, message: '请选择区域！' }]}
            >
            <Select  disabled={regionState}>
              {
                props.regionList.map(item => {
                  return <Option disabled={disabledMeath(1,item)} value={item.id} key={item.id}>{item.title}</Option>
                })
              }
              </Select>
          </Form.Item>
           <Form.Item
              label="角色"
              name="roleId"
              rules={[{ required: true, message: '请选择角色!' }]}
            >
          <Select onChange={(val) => {
            if (val === 1) {
              setregionState(true)
              ref.current.setFieldsValue({
                region:''
              })
            } else {
              setregionState(false)
            }
              }}>
              {
                props.roleList.map(item => {
                  return <Option
                     disabled={disabledMeath(2,item)}
                    value={item.id} key={item.id}>{item.roleName}</Option>
                })
              }
              </Select>
            </Form.Item>
          </Form>
    </div>
  );
})

export default Formitem;
